<template>
  <Header></Header>
  <div>
    <h1 class="font-weight-100 text-center m0 p0">组件市场</h1>
    <div class="container flex mc">
      <nav class="nav-tabs">
        <RouterLink to='/select-group' class="category-item">
          <el-icon>
            <CircleCheck></CircleCheck>
          </el-icon>
          <div class="txt">选择</div>
        </RouterLink>
        <RouterLink to='/input-group' class="category-item">
          <el-icon>
            <Files></Files>
          </el-icon>
          <div class="txt">文本输入</div>
        </RouterLink>
        <RouterLink to='/advanced-group' class="category-item">
          <el-icon>
            <EditPen></EditPen>
          </el-icon>
          <div class="txt">高级题型</div>
        </RouterLink>
        <RouterLink to='/note-group' class="category-item">
          <el-icon>
            <Message></Message>
          </el-icon>
          <div class="txt">备注说明</div>
        </RouterLink>
        <RouterLink to='/personal-info-group' class="category-item">
          <el-icon>
            <ChatLineSquare></ChatLineSquare>
          </el-icon>
          <div class="txt">个人信息</div>
        </RouterLink>
        <RouterLink to='/contact-group' class="category-item">
          <el-icon>
            <User></User>
          </el-icon>
          <div class="txt">联系方式</div>
        </RouterLink>

      </nav>
      <div class="coms">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/Common/Header.vue'
import {
  CircleCheck,
  Files,
  EditPen,
  ChatLineSquare,
  User,
  Message,
} from '@element-plus/icons-vue';

console.log('这是组件市场页面');
</script>

<style scoped lang="scss">
h1 {
  height: 50px;
  margin: 20px 0;
}

.container{
  width: 1180px;
  height: 600px;
  .nav-tabs{
    width: 70px;
    height: 100%;
    .category-item{
      width: 70px;
      height: 70px;
      display: flex;
      margin-bottom: 10px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: var(--font-size-base);
      color: var(--white);
      border-top-left-radius: var(--border-radius-lg);
      border-bottom-left-radius: var(--border-radius-lg);
      text-align: center;
      text-decoration:none;
    }
    @for $i from 1 through 4{
      .category-item:nth-child(4n + #{$i}){
        @if $i == 1 {
          background-color: var(--primary-color);
        } @else if $i == 2 {
          background-color: var(--success-color);
        } @else if $i == 3 {
          background-color: var(--warning-color);
        } @else if $i == 4 {
          background-color: var(--error-color);
        }
      }
    }
  }
  .coms{
    width: calc(1180px - 60px);
    height: 100%;
  }
}

</style>
